<template>
	<view class="">
		<u-navbar title="预约员工" :autoBack="true" :placeholder="true" :border="true"/>
		<!-- class="ulist" :height="scrollHeight" -->
		<view v-if="staffList.length > 0">
			<u-list>
				<u-list-item v-for="(item, index) in staffList" :key="index">
					<view class="list-item" @click="onClickitem(index)">
						<image class="img" :src="item.avatar"></image>
						<view class="dbx">
							<view class="tbx">
								<view class="title">{{item.nickName}}</view>
								<view class="dsc">{{item.storeName}}</view>
							</view>
							<u-icon
								slot="right"
								name="arrow-right" />
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<u-empty marginTop="100" v-else text="暂无预约员工!"></u-empty>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data(){
			return {
				scrollHeight:0, //元素的所需高度
				staffList:[],
				condition:{
					storeId: '',
					page: 1,
					limit: 30,
					// storeId: this.userStore.id
				}
			}
		},
		computed:{
			...mapState(['userStore']),
		},
		onReady() {
			// let _this = this;
			// uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
			// 	success(res) { //成功回调函数
			// 		let wHeight=res.windowHeight //windoHeight为窗口高度，主要使用的是这个
			// 		let titleH=uni.createSelectorQuery().select(".ulist"); //想要获取高度的元素名（class/id）
			// 		titleH.boundingClientRect(data=>{
			// 				_this.scrollHeight=wHeight-data.top  //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
			// 		}).exec()
			// 	}
			// }) 
		},
		onLoad(opt) {
			if(opt.storeId){
				this.condition.storeId = opt.storeId
			}else {
				this.condition.storeId = this.userStore.id
			}
			this.getStoreStaffPageList()
		},
		methods: {
			getStoreStaffPageList(){
				this.$u.api.StoreStaffPageList(this.condition).then(res=>{
					this.staffList = res.data
				})
			},
			onClickitem(index){
				uni.$emit('staff',{...this.staffList[index]})
				uni.navigateBack()
			}
		}
	}
</script>
<style>
	page{
		background-color:#fff;
	}
</style>
<style lang="scss" scoped>
	.list-item{
		display: flex;
		margin: 0 20rpx;
		padding: 20rpx 0;
		border-bottom: 1px #f7f7f7 solid;
		align-items: center;
		.img{
			width: 120rpx;
			height:120rpx;
			border-radius: 50%;
			flex-shrink: 0;
		}
		.dbx{
			width: 100%;
			margin-left:20rpx;
			display:flex;
			align-items: center;
			justify-content: space-between;
			.tbx{
				.dsc{
					color:#333
				}
			}
		}
	}
</style>